<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <link rel="stylesheet" href="static/css/font-awesome.min.css">
  <link rel="stylesheet" href="static/css/register.css"/>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script> -->
  <script src="static/js/jquery-3.4.1.min.js"></script>
  <script src="static/js/jsencrypt.min.js"></script>
  <script src="static/js/axios.js"></script>
</head>
<body>
<div id="app">
  <div>
    <p style="font-size: 50px; color: #00b0ff; margin: 10px 0">注册</p>
    <p id="error_msg" style="color: #ff0000;text-align: center;height: 30px;margin: 0">{{error_msg}}</p>
  </div>
  <form id="register_form" method="post" @submit.prevent="to_register">
    <table>
      <tr>
        <td><label for="name_input">用户名:</label></td>
        <td><input type="text" @focus="remove_class(0)" :class="get_class(0)" name="username" id="name_input"
                   v-model="user_name"
                   required/><br/></td>
      </tr>
      <tr>
        <td><label for="password_input">密码:</label></td>
        <td><input type="password" maxlength="16" @focus="remove_class(1)" @input="check_repeat" :class="get_class(1)" name="password"
                   v-model="password"
                   id="password_input" onpaste="return false" ondragenter="return false" required/><br/></td>
      </tr>
      <tr>
        <td><label for="repeat_input">重复密码:</label></td>
        <td><input type="password" maxlength="16" @focus="remove_class(2)" @input="check_repeat" :class="get_class(2)"
                   name="r_password"
                   v-model="repeat_password"
                   id="repeat_input" onpaste="return false" ondragenter="return false" required/><br/></td>
      </tr>
      <tr v-if="false">
        <td><label for="check_input">验证码:</label></td>
        <td style="float: left;">
          <input type="text" maxlength="4" onfocus="set(3)" onblur="checkCheckCode();"
                 class="input normal" id="check_input" name="checkCode" v-model="check_code" />
          <img id="check_code" onclick="flashCheckCode()" :src="check_code_src"/>
        </td>
        <td><i class="" id="icon" aria-hidden="true"></i></td>
      </tr>
    </table>
    <input type="submit" class="input normal submit" value="注册" />
  </form>
  <button class="input normal submit" @click="to_login">转到登录</button>
</div>

<script src="static/js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      domain: '',
      user_name: '',
      password: '',
      repeat_password: '',
      error_msg: '',
      check_code: '',
      check_code_src: '',
      is_error: [false, false, false]
    },
    methods: {
      remove_class(e) {
        Vue.set(this.is_error, e, false);
      },
      check_repeat() {
        if (this.password !== this.repeat_password) {
          Vue.set(this.is_error, 2, true);
          this.error_msg = '密码不匹配!';
        } else {
          Vue.set(this.is_error, 2, false);
          this.error_msg = '';
        }
      },
      to_register() {
        if (this.user_name === '') {
          Vue.set(this.is_error, 0, true);
          this.error_msg = '用户名为空!';
          return;
        }
        if (this.password !== this.repeat_password) {
          Vue.set(this.is_error, 2, true);
          this.error_msg = '密码不匹配!';
          return;
        }
        let params = new FormData();
        params.append('username', this.user_name);
        params.append('password', this.password);
        params.append('admin', false);
        axios.post(this.domain.concat('/users'), params, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.retCode === 0) {
            alert('注册成功');
            this.to_login();
          } else {
            this.error_msg = res.data.message;
            alert(res.data.message);
          }
        }).catch((err) => {
          alert('未知错误');
        })
      },
      to_login() {
        window.location = this.domain.concat('/login.html');
      },
      get_class(e) {
        return {
          input: true,
          normal: !this.is_error[e],
          error: this.is_error[e]
        }
      },
      encrypt(s) {
        let encrypt = new JSEncrypt();
        encrypt.setPublicKey(this.pub_key);
        return encrypt.encrypt(s);
      }
    },
    computed: {

    },
    mounted() {
      this.domain = 'http://'.concat(document.domain);
    }
  })
</script>
</body>
</html>